<script setup lang="ts">
import { useRoute } from 'vue-router'
import BigButton from '@/components/common/BigButton.vue'
import DatePicker from '@/components/common/DatePicker.vue'
import Select from '@/components/common/Select.vue'
import TextArea from '@/components/common/TextArea.vue'
import TextInput from '@/components/common/TextInput.vue'
import HomeworkInnerQuestionEditor from '@/components/homework/HomeworkInnerQuestionEditor.vue'
import { useHomework } from '@/hooks/homework/useHomework'

const route = useRoute()
const homeworkId = route.params.homeworkId as string | undefined
const exitedReadingId = route.query.readingId as string | undefined
const exitedReadingTitle = route.query.readingTitle as string | undefined

const {
  homewokrTilte,
  homeworkClassId,
  homeworkDeadline,
  homeworkContent,
  avaliableClassList,
  saveHomework,
  readingId,
  isLoading,
} = useHomework(homeworkId, exitedReadingId, exitedReadingTitle)
</script>

<template>
  <div class="headline">
    <div class="content-header">
      {{ exitedReadingId
        ? '布置作业'
        : homeworkId ? '编辑作业' : '新建作业' }}
    </div>
    <router-link class="back-to-homework-list" to="/homework">
      返回作业列表 &gt;
    </router-link>
  </div>
  <div class="card-area">
    <div class="card-header">
      <div class="card-title">
        作业设置
      </div>
    </div>
    <TextInput v-model="homewokrTilte" label="作业标题:" placeholder="请输入作业标题" />
    <Select v-model="homeworkClassId" label="设置班级:" placeholder="请选择班级" :options="avaliableClassList" />
    <DatePicker v-model="homeworkDeadline" label="截止时间:" />
    <TextArea v-model="homeworkContent" placeholder="请输入作业内容" />
  </div>
  <BigButton v-if="exitedReadingId" class="save-btn" text="布置作业" @click="saveHomework().then(() => $router.push('/homework'))" />
  <!-- 如果没有现存题目，并且作业基础信息加载完毕，则打开自定义题目编辑器 -->
  <HomeworkInnerQuestionEditor v-if="!exitedReadingId && !isLoading" :reading-id="readingId" @save="(e) => saveHomework(e).then(() => $router.push('/homework'))" />
</template>

<style scoped>
.headline {
  position: relative;
  width: 100%;
  margin-bottom: 2rem;

  .content-header {
    display: inline;
  }

  .back-to-homework-list {
    display: inline;
    position: absolute;
    right: 0;
    text-decoration: none;
    vertical-align: top;
    text-align: right;
    letter-spacing: 0.01em;
    color: var(--primary-color);
    font-weight: 400;
  }
}

.card-area {
  padding: 12px 19px 20px 19px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 18px;

  .card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 1rem;
    .card-title {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }

    .card-opr-container {
      display: flex;
      gap: 8px;
    }
  }
}

.save-btn {
  margin-top: 2rem;
}
</style>
